<template>
	<view class="main-continer">
		<scroll-view class="scroll-view">
			<view class="top-image">

			</view>
		</scroll-view>
		<!-- 轮播图 -->
		<swiper class="card-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
		 :autoplay="true" interval="5000" duration="500" @change="cardSwiper" indicator-color="#8799a3"
		 indicator-active-color="#0081ff">
			<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''" @click="getBanner(item)">
				<view class="swiper-item">
					<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="home-tag">
			<view class="left-tag">
				<image class="left-image" src="../../static/image/people/tv_tag.png"></image>
				<view class="left-text">电视直播</view>
			</view>
			<view class="right-more" @click="liveMore()">
				<view class="right-more-text">更多</view>
				<image class="right-more-image" src="../../static/image/people/right_more.png"></image>
			</view>

		</view>
		<scroll-view scroll-x="true">
			<view class="live-list">
				<view class="live-item" v-for="(item,index) in liveList" :key="index" @click="itemClick(item,true)">
					<image class="live-item-image" :src="item.imageUrl"></image>
					<view class="live-item-text">{{item.channelName.zh_CN}}</view>
				</view>
			</view>

		</scroll-view>

		<view class="home-tag" style="margin-top: 32upx;">
			<view class="left-tag">
				<image class="left-image" src="../../static/image/people/video_tag.png"></image>
				<view class="left-text">节目点播</view>
			</view>
			<view class="right-more" @click="videoMore()">
				<view class="right-more-text">更多</view>
				<image class="right-more-image" src="../../static/image/people/right_more.png"></image>
			</view>

		</view>

		<scroll-view scroll-x="true">
			<view class="video-list">
				<view class="video-item" v-for="(item,index) in videoList" :key="index" @click="itemClick(item,false)">
					<image :src="item.logoPicture" class="video-image"></image>
					<view class="video-item-text">{{item.name}}</view>
				</view>
			</view>
		</scroll-view>


		<view class="home-tag" style="margin-top: 32upx;">
			<view class="left-tag">
				<image class="left-image" src="../../static/image/people/video_tag.png"></image>
				<view class="left-text">广播节目</view>
			</view>
			<!-- 			<view class="right-more" @click="videoMore()">
				<view class="right-more-text">更多</view>
				<image class="right-more-image" src="../../static/image/people/right_more.png"></image>
			</view> -->

		</view>
		<scroll-view scroll-x="true">
			<view class="live-list">
				<view class="live-item" v-for="(item,index) in boastList" :key="index" @click="itemFm(item)">
					<image class="live-item-image" :src="item.url"></image>
					<view class="live-item-text">{{item.title}}</view>
				</view>
			</view>

		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content: '',
				player: "",
				dotStyle: false,
				cardCur: 0,
				liveList: [],
				videoList: [{
					logoPicture: "https://cdjjyl.com.cn/images/videoImg/video1.jpg",
					name: "重磅推出！乐至县陈毅故里景区首批文创产品惊艳亮相！",
					channelUrl: "https://imgcdn.lzxrmtzx.com/video1641544543415832378.mp4"
				}, {
					logoPicture: "https://cdjjyl.com.cn/images/videoImg/video2.jpg",
					name: "不忘初心方得始终学习贯彻党的十九届六中全会精神",
					channelUrl: "https://imgcdn.lzxrmtzx.com/video1641367006212215227.mp4"
				}, {
					logoPicture: "https://cdjjyl.com.cn/images/videoImg/video3.jpg",
					name: "2021即将过去 你今年的愿望实现了吗？",
					channelUrl: "https://imgcdn.lzxrmtzx.com/video1640943419941755205.mp4"
				}],
				boastList: [{
						url: '../../static/image/video/fm_lezhi.png',
						playUrl: 'http://rmlive.lzxrmtzx.com/live6/live6.m3u8',
						title: '乐至本地广播'
					},
					{
						url: '../../static/image/video/fm_cszy.png',
						playUrl: 'http://satellitepull.cnr.cn/live/wxsccszs/playlist.m3u8',
						title: '四川城市之音'
					},
					{
						url: '../../static/image/video/fm_car.jpeg',
						playUrl: 'http://satellitepull.cnr.cn/live/wxscjtgb/playlist.m3u8',
						title: '四川交通广播'
					},
				],
				swiperList: [{ // 轮播图
					id: 30466885,
					type: 'image',
					url: '../../static/image/people/swiper1.jpg',
					playUrl: '',
					title: '小悟空'
				}, {
					id: 30176393,
					type: 'image',
					url: '../../static/image/people/swiper2.jpg',
					playUrl: '',
					title: '天气预爆'
				}, {
					id: 27668250,
					type: 'image',
					playUrl: '',
					url: '../../static/image/people/swiper3.jpg',
					title: '灵魂战车'
				}],
				liveImageList: ['../../static/image/people/c_1.png',
					'../../static/image/people/c_2.png',
					'../../static/image/people/c_4.png',
					'../../static/image/people/c_5.png',
					'../../static/image/people/c_7.png',
					'../../static/image/people/c_8.png',
					'../../static/image/people/c_10.png',
					'../../static/image/people/c_11.png',
					'../../static/image/people/c_12.png',
					'../../static/image/people/c_13.png',
					'../../static/image/people/c_14.png',
					'../../static/image/people/c_15.png',
				]
			}
		},
		mounted() {
			this.getData()
		},
		methods: {
			getData() {
				let param = {
					page: 1,
					pageSize: 10
				}
				this.$api.request.getchannel(param, (res) => {
					if (res.body.status.statusCode == '0') {
						this.liveList = res.body.data.channelModelBo
						this.liveImageList.forEach((item, index) => {
							this.liveList.forEach((mItem, mIndex) => {
								if (index == mIndex) {
									this.$set(mItem, 'imageUrl', item)
								}
							})
						})
						console.dir(this.liveList)
					}
				})
				// this.$api.request.getMusic(param, (res) => {
				// 	if (res.body.status.statusCode == '0') {
				// 		console.log(res.body.status)
				// 		this.videoList = res.body.data.vos
				// 	}
				// })
			},
			getBanner(item) {
				// let obj = {
				// 	url: item.playUrl,
				// 	isLive: false
				// }
				// uni.navigateTo({
				// 	url: `./testvideo?obj=${encodeURIComponent(JSON.stringify(obj))}`,
				// })
			},
			itemClick(item, isLive) {
				let obj = {
					url: item.channelUrl,
					isLive: isLive
				}
				uni.navigateTo({
					url: `./testvideo?obj=${encodeURIComponent(JSON.stringify(obj))}`,
				})

			},
			itemFm(item) {
				uni.navigateTo({
					url: `./fmPlay?obj=${encodeURIComponent(JSON.stringify(item))}`,
				})

			},

			// 轮播图事件
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			/**
			 * 更多直播页面
			 */
			liveMore() {
				uni.navigateTo({
					url: './liveList'
				})
			},
			videoMore() {
				uni.navigateTo({
					url: './videoList'
				})
			}
		}

	}
</script>

<style lang="scss" scoped>
	.main-continer {
		height: 100vh;
		background-color: #F8F8F8;
	}

	.home-tag {
		margin-left: 20upx;
		margin-right: 20upx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.left-tag {
			display: flex;
			align-items: center;

			.left-image {
				width: 44upx;
				height: 44upx;
			}

			.left-text {
				margin-left: 4upx;
				font-style: normal;
				font-weight: normal;
				font-size: 32upx;
				color: #413F3F;
			}

		}

		.right-more {
			display: flex;
			align-items: center;

			.right-more-text {
				font-family: PingFang SC;
				font-style: normal;
				font-weight: normal;
				font-size: 28upx;
				color: #413F3F;
			}

			.right-more-image {
				margin-left: 6upx;
				width: 12upx;
				height: 24upx;
			}

		}
	}

	.live-list {
		margin-left: 20upx;
		display: flex;
		margin-top: 26upx;

		.live-item {
			display: flex;
			margin-right: 20upx;
			flex-direction: column;
			justify-content: center;

			.live-item-image {
				width: 200upx;
				height: 144upx;
				background-color: #F0F0F0;
			}

			.live-item-text {
				margin-top: 8upx;
				font-family: PingFang SC;
				font-style: normal;
				font-weight: normal;
				font-size: 24upx;
				line-height: 40upx;
				/* identical to box height */
				text-align: center;
				color: #797F81;
			}
		}
	}

	.video-list {
		margin-left: 20upx;
		margin-right: 20upx;
		margin-top: 32upx;
		display: flex;
		flex-wrap: wrap;

		.video-item {
			overflow: hidden;
			display: flex;
			margin-top: 32upx;
			margin-right: 30upx;
			flex-direction: column;
			// justify-content: center;

			.video-image {
				width: 216upx;
				height: 320upx;
				background-color: #F0F0F0;
			}

			.video-item-text {
				margin-top: 8upx;
				font-family: PingFang SC;
				font-style: normal;
				font-weight: normal;
				font-size: 24upx;
				line-height: 40upx;
				/* identical to box height */
				text-align: center;
				color: #797F81;
				width: 216upx;
				overflow: hidden;
			}

		}

		:nth-child(3n) {
			margin-right: 0rpx;
		}
	}

	.card-swiper {
		height: 500upx !important;
	}

	.card-swiper swiper-item {
		width: 610upx !important;
		left: 70upx;
		box-sizing: border-box;
		padding: 40upx 0upx 70upx;
		overflow: initial;
	}

	.card-swiper swiper-item .swiper-item {
		width: 100%;
		display: block;
		height: 100%;
		border-radius: 10upx;
		background-color: #007AFF;
		transform: scale(0.9);
		transition: all 0.2s ease-in 0s;
		overflow: hidden;
	}

	.card-swiper swiper-item.cur .swiper-item {
		transform: none;
		transition: all 0.2s ease-in 0s;
	}

	swiper.square-dot .wx-swiper-dot,
	swiper.square-dot .a-swiper-dot,
	swiper.square-dot .uni-swiper-dot {
		background-color: #ffffff;
		opacity: 0.4;
		width: 10upx;
		height: 10upx;
		border-radius: 20upx;
		margin: 0 8upx !important;
	}

	swiper.square-dot .wx-swiper-dot.wx-swiper-dot-active,
	swiper.square-dot .a-swiper-dot.a-swiper-dot-active,
	swiper.square-dot .uni-swiper-dot.uni-swiper-dot-active {
		opacity: 1;
		width: 30upx;
	}

	swiper.round-dot .wx-swiper-dot,
	swiper.round-dot .a-swiper-dot,
	swiper.round-dot .uni-swiper-dot {
		width: 10upx;
		height: 10upx;
		position: relative;
		margin: 4upx 8upx !important;
	}

	swiper.round-dot .wx-swiper-dot.wx-swiper-dot-active::after,
	swiper.round-dot .a-swiper-dot.a-swiper-dot-active::after,
	swiper.round-dot .uni-swiper-dot.uni-swiper-dot-active::after {
		content: "";
		position: absolute;
		width: 10upx;
		height: 10upx;
		top: 0upx;
		left: 0upx;
		right: 0;
		bottom: 0;
		margin: auto;
		background-color: #ffffff;
		border-radius: 20upx;
	}

	swiper.round-dot .wx-swiper-dot.wx-swiper-dot-active,
	swiper.round-dot .a-swiper-dot.a-swiper-dot-active,
	swiper.round-dot .uni-swiper-dot.uni-swiper-dot-active {
		width: 18upx;
		height: 18upx;
	}
</style>
